<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        ul {
            margin: 0;
            padding: 0;
        }

        #app {
            margin: 0 auto;
            width: 700px;
        }

        ul {
            list-style: none;
        }

        span {
            width: 150px;
            display: inline-block;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>水果列表清单</h1>
        <ul class="myul">
            <li>
                <span>名称</span>
                <span>数量</span>
                <span>单价</span>
                <span>操作</span>
            </li>
        </ul>
       <span id="total">总计:</span>
        <p>水果名称：<input type="text"></p>
        <p>水果数量：<input type="text"></p>
        <p>水果单价：<input type="text"></p>
        <button onclick="add()" id="add">添加</button>
    </div>
</body>

</html>
<script>
    var fruits = [
        {
            fruitName: '苹果',
            fruitQuantity: 30,
            fruitPrice: 3.8
        },
        {
            fruitName: '西瓜',
            fruitQuantity: 240,
            fruitPrice: 1.8
        },
        {
            fruitName: '芒果',
            fruitQuantity: 60,
            fruitPrice: 7.8
        }
    ]
    // 1.通过id获取元素
    // let add=document.getElementById('add')
    // 2.getElementsByTagName通过标签名称获取DOM元素的集合
    // let ul=document.getElementsByTagName('ul')[0]
    // 3.getElementsByClassName通过样式名称获取DOM元素的集合
    // let ul=document.getElementsByClassName('myul')[0]
    // 4.通过样式选择器获取元素或者集合,querySelector获取满足条件的第一个元素
    let ul = document.querySelector('ul')
    //保存ul的初始状态
    let tmp=ul.innerHTML
    let p=document.querySelectorAll('p>input')
    //索引初始值 判断添加还是修改
    let fruitIndex=-1;
    // let ul=document.querySelectorAll('ul')[0]
    // 初始化ul界面
    function init() {
        //恢复初始
        ul.innerHTML=tmp
        for (let i in fruits) {
            // 每遍历一次产生一个li元素，注意ES6的模版语法
            let li = `<li>
                <span>${fruits[i].fruitName}</span>
                <span>${fruits[i].fruitQuantity}</span>
                <span>${fruits[i].fruitPrice}</span>
                <span>
                    <button onclick="delFruit(${i})">删除</button>
                    <button onclick="updata(${i})">修改</button>
                </span>
            </li>`
            ul.innerHTML += li;
        }
        var total=fruits.reduce(function(total,item){
    return total+=item.fruitQuantity*item.fruitPrice
},0)
        document.getElementById('total').innerHTML=total
    }
    init()
    //删除
    function delFruit(index){
        // console.log(index);
        if(confirm('确认删除')){
        fruits.splice(index,1)
        init()
    }
    }
    //修改
    function updata(index){
        //将索引修改为"修改状态"
        fruitIndex=index;
        let fruit=fruits[index];
        // console.log(fruits);
        p[0].value=fruit.fruitName
        p[1].value=fruit.fruitQuantity
        p[2].value=fruit.fruitPrice
        document.getElementById('add').innerHTML="确认修改"
    }
    // 添加水果
    function add(){
        let fruit={}
        fruit.fruitName=p[0].value
        fruit.fruitQuantity=p[1].value
        fruit.fruitPrice=p[2].value
        if(fruitIndex==-1){
        fruits.push(fruit)  
        // 重新渲染页面
        init()
        }else{
            //真正的修改
        fruits.splice(fruitIndex,1,fruit)  
            init()
            //重新添加和修改
            document.getElementById('add').innerHTML="添加"
            fruitIndex=-1;
            p[0].value=''
            p[1].value=''
            p[2].value=''
        }
        // let fruit={}
        // fruit.fruitName=p[0].value
        // fruit.fruitQuantity=p[1].value
        // fruit.fruitPrice=p[2].value
        // fruits.push(fruit)  
        // // 重新渲染页面
        // init()      
    }

</script>
<!-- 鼠标事件
onclick ondblclick onmouseover onmouseleave onmousedown onmouseup
onclick 单击触发(只是鼠标左键)
 ondblclick 双击触发(也是鼠标左键)
onmouseover 鼠标移到上面就触发
onmouseleave 鼠标移开触发
onmousedown 鼠标处于点下状态触发，所以单击也会触发(时间短)，不区分左右键
onmouseup 鼠标松开触发，不区分左右键
在鼠标事件绑定的函数中，我们可以修改任意标签的属性，没有了css之前的限制
自身的属性页可以修改，this就是代表自身标签 -->